import './choujiang.scss';
import React, { useState } from 'react';

const App = () => {
    const [data, setData] = useState([
        { id: 1, name: '1', redom: 0.30 },
        { id: 2, name: '2', redom: 0.15 },
        { id: 3, name: '3', redom: 0.10 },
        { id: 4, name: '4', redom: 0.10 },
        { id: 5, name: '5', redom: 0.05 },
        { id: 6, name: '6', redom: 0.10 },
        { id: 7, name: '7', redom: 0.10 },
        { id: 8, name: '8', redom: 0.06 },
        { id: 9, name: '9', redom: 0.04 }
    ]);


    const circleRadius = 150; // 圆的半径
    let totalRotation = 0; // 总角度用于定位每个扇形

    return (
        <div>
            <div className="sumBox">
                <div className="sumyuan">
                    <div className="circle-container">
                        {data.map((item, index) => {
                            const everybili = item.redom * 360; // 计算每个扇形的角度比例
                            const rotation = totalRotation; // 当前扇形的起始旋转角度
                            totalRotation += everybili; // 累积总的旋转角度

                            let randomNumber = Math.floor(Math.random() * 256); // 随机颜色

                            const height = circleRadius * Math.sin((everybili * Math.PI) / 360); // 计算高度
                            console.log(rotation, '>>>')
                            return (

                                <div
                                    key={item.id}
                                    className="circle-item"
                                    style={{
                                        width: `50%`, // 扇形的宽度根据圆的半径决定
                                        height: `${height}%`, // 扇形的高度固定为圆的高度
                                        transform: `rotate(${rotation}deg)`,
                                        backgroundColor: `rgba(${randomNumber}, ${randomNumber / 2}, ${randomNumber}, 1)`,
                                    }}
                                >
                                    {item.name}
                                </div>
                            );
                        })}
                    </div>
                    <div className="smalerCircle"></div>
                </div>
            </div>
        </div>
    );
};

export default App;
